<template>
  <div class="getComment">
    <van-field
    v-model.trim="message"
    rows="2"
    autosize
    type="textarea"
    maxlength="50"
    placeholder="请输入评论"
    show-word-limit
    >
      <van-button type="info" slot="extra" @click="addComment">发布</van-button>
    </van-field>
  </div>
</template>

<script>
import {addCommentAPI,getCommentAPI} from '@/api'
export default {
name: 'PublishComment',
props:{
  target:{
    type: [Number,String,Object],
    required: true
  },
  commentInfo:{
      type: Array,
      default: ()=> []
    },
  artId:{
    type: [Number,String,Object],
    default: null
    }
},
data(){
  return {
    message:'', 
    limit: 10,
    offset: null,
  }
},
methods: {
  async addComment(){
    if(this.message) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '发布中...',
      });
      try {
        const {data:{data}} = await addCommentAPI({
          target: this.target,//评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）	
          content: this.message,//评论的内容
          art_id: this.artId//文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。	
        })
        console.log(data);
        const {new_obj} = data
        // console.log(data.new_obj);
        // console.log(new_obj);
        // this.commentInfo.unshift(new_obj)
        this.$emit('loadSuccess',data)
        this.$toast.success('发布成功')
        this.message = ''
        //再次调用，获取总评论数
      } catch (error) {
        // console.log(error);
        this.$toast.fail('操作失败，请稍后重试！')
      }
    }else {
      this.$toast('评论的内容不能为空！')
    }   
  }
}
}
</script>

<style scoped lang="less">
.getComment{
  /deep/ .van-cell{
    align-items: center;
    .van-button{
      margin-left: 20px;
    }
    .van-cell__value{
      border: 1px solid #ccc;
      padding: 10px;
    }
  }
}

</style>